<template>
  <el-dialog
    ref="baseDialog"
    class="base-dialog"
    :visible.sync="show"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :close-on-click-modal="false"
    :close-on-press-escape="closeOnPressEscape"
    :append-to-body="appendToBody"
    :show-close="showClose"
    @close="beforeCloseDialog"
    @open="beforeOpenDialog">
    <slot />
    <div slot="footer" class="base-dialog__footer">
      <template v-if="showDefaultFooter">
        <el-button
          v-if="!disabled"
          type="primary"
          @click="updateData">
          {{ confirmText }}
        </el-button>
        <el-button @click="show = false">
          {{ cancelText }}
        </el-button>
      </template>
      <template v-else>
        <slot name="footer" />
      </template>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'BaseDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: 'initial'
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    showDefaultFooter: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    confirmText: {
      type: String,
      default: '保存'
    },
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  data() {
    return {
      loadingInstance: null,
      translate: {
        x: 0,
        y: 0
      }
    }
  },
  computed: {
    show: {
      set(val) {
        this.$emit('update:visible', val)
      },
      get() {
        return this.visible
      }
    }
  },
  watch: {
    loading(val) {
      if (val) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
        })
      } else {
        this.loadingInstance.close()
      }
    }
  },
  mounted() {
    this.header = this.$refs.baseDialog.$el.querySelector('.el-dialog__header')
    this.header.addEventListener('mousedown', this.handleMousedown)
  },
  beforeDestroy() {
    this.header.removeEventListener('mousedown', this.handleMousedown)
    this.header = null
  },
  methods: {
    beforeCloseDialog() {
      const dialog = this.$refs.baseDialog.$el.querySelector('.el-dialog')
      const dialogBody = this.$refs.baseDialog.$el.querySelector('.el-dialog__body')
      dialog.style.transform = 'translate(0, 0)'
      this.translate = { x: 0, y: 0 }
      dialogBody.scrollTop = 0
      this.$emit('close')
    },
    beforeOpenDialog() {
      this.$emit('open')
    },
    updateData() {
      this.$emit('updateData')
    },
    handleMousedown(e) {
      const dialog = this.$refs.baseDialog.$el.querySelector('.el-dialog')
      const startX = e.pageX
      const startY = e.pageY
      const { x, y } = this.translate

      const dragHandler = evt => {
        this.translate = {
          x: x + evt.pageX - startX,
          y: y + evt.pageY - startY
        }
        dialog.style.cssText += `opacity: 0.5; transform: translate(${this.translate.x}px, ${this.translate.y}px)`
      }
      document.addEventListener('mousemove', dragHandler)

      const dragEndHandler = () => {
        dialog.style.opacity = '1'
        document.removeEventListener('mousemove', dragHandler)
        document.removeEventListener('mouseup', dragEndHandler)
      }
      document.addEventListener('mouseup', dragEndHandler)
    }
  }
}
</script>
<style lang="scss">
.base-dialog{
  .el-dialog{
    // background: #fff;
    .el-dialog__header{
      // height: 45px;
      // line-height: 45px;
      // background: #409EFF;
      .el-dialog__title{
        color: #fff;
      }
      .el-dialog__headerbtn{
        font-size: 20px;
        .el-dialog__close{
          color: #fff;
        }
        &:focus,
        &:hover{
          .el-dialog__close{
            color: #d0c0c0;
          }
        }
      }
    }
    .el-form{
      .el-form-item{
        margin-bottom: 20px;
        .el-form-item{
          margin-bottom: 0;
        }
      }
    }
  }
}
.dialog-fade-enter-active,
.dialog-fade-leave-active {
	animation: none !important;
  opacity: 1;
  transform: scaleY(1);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
}
.dialog-fade-enter,
.dialog-fade-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
</style>
